<template>
  <div class="box">
    <div class="title">武汉第一人民医院 | {{ route.query.TwoDepart }}</div>
    <div class="content">
      <div class="time">2024年04月</div>
      <div class="itemList">
        <div
          class="item"
          v-for="item in dateAndWeak"
          :key="item.date"
          @click="clickDate(item.date)"
          :class="{ cur: date == item.date }"
        >
          <div class="title">{{ item.date }} {{ item.weekday }}</div>
          <div class="status">{{ dateSch.length>0?'有号':'无号' }}</div>
        </div>
      </div>
    </div>
    <div class="fullter">
      <div class="befor">
        <div class="title">
          <svg
            t="1713768162589"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4432"
            width="32"
            height="32"
          >
            <path
              d="M505.34 221.87c-9.91 0-17.93-8.04-17.93-17.95V96.25c0-9.91 8.02-17.94 17.93-17.94 9.93 0 17.95 8.03 17.95 17.94v107.67c0 9.91-8.02 17.95-17.95 17.95zM505.34 939.67s0.02 0 0 0c-9.88 0-17.93-8.03-17.93-17.94V814.06c0-9.91 8.04-17.95 17.95-17.95s17.93 8.04 17.93 17.95v107.67c0 9.91-8.02 17.94-17.95 17.94z"
              fill="#F6BB42"
              p-id="4433"
            ></path>
            <path
              d="M302.32 305.96c-7.02 7.01-18.37 7.01-25.37 0l-76.15-76.14c-6.99-7-6.99-18.36 0-25.37 7.02-7.02 18.37-7.02 25.39 0l76.13 76.13c7.02 7.01 7.02 18.38 0 25.38zM809.9 813.52c-7.02 7.02-18.38 7.02-25.39 0l-76.13-76.13c-7.02-7.01-7.02-18.38 0-25.38 7.02-7.01 18.37-7.01 25.39 0l76.13 76.14c6.99 7 6.99 18.36 0 25.37z"
              fill="#FFCE54"
              p-id="4434"
            ></path>
            <path
              d="M218.23 508.99c0 9.91-8.04 17.94-17.95 17.94H92.61c-9.91 0-17.93-8.03-17.95-17.94 0-9.91 8.04-17.94 17.95-17.94h107.67c9.91 0 17.95 8.02 17.95 17.94zM936.02 508.99c0 9.91-8.02 17.94-17.93 17.94H810.42c-9.91 0-17.95-8.03-17.95-17.94 0-9.91 8.04-17.94 17.95-17.94h107.67c9.91 0 17.93 8.02 17.93 17.94z"
              fill="#F6BB42"
              p-id="4435"
            ></path>
            <path
              d="M302.32 712.01c7.02 7 7.02 18.37 0 25.38l-76.13 76.13c-7.02 7.02-18.37 7.02-25.39 0-6.99-7.01-6.99-18.36 0-25.37l76.15-76.14c7-7.01 18.36-7.01 25.37 0zM809.9 204.44c0 0.01 0 0 0 0 6.99 7.02 6.99 18.38 0 25.38l-76.15 76.14c-6.99 7.01-18.35 7.01-25.37 0-7.02-7-7.02-18.37 0-25.38l76.13-76.14c7.01-7 18.37-7 25.39 0z"
              fill="#FFCE54"
              p-id="4436"
            ></path>
            <path
              d="M505.34 742.27c-128.62 0-233.27-104.65-233.27-233.28S376.72 275.7 505.34 275.7c128.65 0 233.29 104.65 233.29 233.28S633.98 742.27 505.34 742.27z"
              fill="#FFCE54"
              p-id="4437"
            ></path>
            <path
              d="M505.34 257.75c-138.74 0-251.22 112.48-251.22 251.24S366.6 760.22 505.34 760.22c138.77 0 251.25-112.48 251.25-251.23S644.1 257.75 505.34 257.75z m152.27 403.5c-40.66 40.68-94.74 63.08-152.28 63.08-57.52 0-111.59-22.4-152.25-63.08C312.42 620.59 290 566.5 290 508.99s22.42-111.6 63.09-152.26c40.66-40.68 94.74-63.08 152.25-63.08 57.54 0 111.61 22.4 152.28 63.08 40.67 40.66 63.06 94.75 63.06 152.26s-22.4 111.6-63.07 152.26z"
              fill="#F6BB42"
              p-id="4438"
            ></path>
          </svg>
          <h3>上午号源</h3>
        </div>
        <div class="body">
          <template v-if="morningSch.length>0" >
            <div class="item" v-for="(item,index) in morningSch" :key="index" >
            <div class="left">
              <div class="doctor">{{ item.doctorId?.job?.jName }}  | {{ item.doctorId?.name }}</div>
              <div class="depart">{{ item.doctorId?.TweDepart }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ item.price }}</div>
              <el-button type="primary" :disabled="item.status==1||item.currentNumber<=0 || item.status==2 " @click="goRegisterSetp(item._id)" >
               <span v-if="item.status==0  " >
                剩余{{ item.currentNumber }}
               </span>
               <span v-else-if="item.currentNumber<=0 || item.status==2 " >已满员</span>
               <span v-else >
                已停诊
               </span>
              </el-button>
            </div>
          </div>
          </template>
          <el-empty description="暂无信息" v-else />
        </div>
      </div>
      <div class="after">
        <div class="title">
          <svg
            t="1713768320301"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4647"
            width="32"
            height="32"
          >
            <path
              d="M256 512a256 256 0 1 1 477.472 128.512l-55.328-32.16A190.944 190.944 0 0 0 704 512a192 192 0 1 0-384 0c0 33.568 8.576 65.76 24.672 94.272l-55.712 31.488A254.848 254.848 0 0 1 256 512zM480 128a32 32 0 0 1 64 0v64a32 32 0 0 1-64 0V128zM760.896 217.856a31.968 31.968 0 1 1 45.248 45.248l-45.248 45.248a31.968 31.968 0 1 1-45.248-45.248l45.248-45.248zM263.104 217.856a31.968 31.968 0 1 0-45.248 45.248l45.248 45.248a31.968 31.968 0 1 0 45.248-45.248L263.104 217.856zM896 480a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64h64zM192 480a32 32 0 0 1 0 64H128a32 32 0 0 1 0-64h64z"
              fill="#FCD118"
              p-id="4648"
            ></path>
            <path
              d="M832 672a32 32 0 0 0 0-64H192a32 32 0 0 0 0 64h640z"
              fill="#4A90E2"
              p-id="4649"
            ></path>
            <path
              d="M512 896a32 32 0 0 1-32-32v-160a32 32 0 1 1 64 0v160a32 32 0 0 1-32 32z"
              fill="#4A90E2"
              p-id="4650"
            ></path>
            <path
              d="M510.72 928h-0.32a32 32 0 0 1-22.528-9.6l-62.72-64a32 32 0 1 1 45.696-44.8l40.32 41.152 42.432-41.6a31.904 31.904 0 0 1 45.248 0.448 31.968 31.968 0 0 1-0.448 45.248l-65.28 64a32 32 0 0 1-22.4 9.152z"
              fill="#4A90E2"
              p-id="4651"
            ></path>
          </svg>
          <h3>下午号源</h3>
        </div>
        <div class="body">
         <template v-if="afternoonSch.length>0" >
          <div class="item" v-for="(item,index) in afternoonSch" :key="index" >
            <div class="left">
              <div class="doctor">{{ item.doctorId?.job?.jName }}  | {{ item.doctorId?.name }}</div>
              <div class="depart">{{ item.doctorId?.TweDepart }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ item.price }}</div>
              <el-button type="primary" :disabled="item.status==1||item.currentNumber<=0 || item.status==2  " @click="goRegisterSetp(item._id)" >
               <span v-if="item.status==0 " >
                剩余{{ item.currentNumber }}
               </span>
               <span v-else-if="item.currentNumber<=0 || item.status==2 " >已满员</span>
               <span v-else >
                已停诊
               </span>
              </el-button>
            </div>
          </div>
        </template>
        <el-empty description="暂无信息" v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref , onMounted , computed } from "vue";
import { getDocSchListAPI } from '@/api/DocSch'
import { getDatesAndWeekdaysForNextSixDays , getCurrentDate ,filterMorningOrAfternoon } from "@/utils/string.js";
import { useRoute , useRouter } from 'vue-router'
let route = useRoute()
let router = useRouter()
onMounted(()=>{
  getDocSchList()
})
let dateAndWeak = ref([]);
let date = ref("");
let dateSchList = ref([])
date.value = getCurrentDate()
dateAndWeak.value = getDatesAndWeekdaysForNextSixDays();
let dateSch = computed(()=>{
  return dateSchList.value.filter(item=>{
    return item.date == date.value
  })
})

//上午排班
let morningSch = computed(()=>{
  return filterMorningOrAfternoon(dateSch.value,"morning")
})
//下午排班
let afternoonSch = computed(()=>{
  return filterMorningOrAfternoon(dateSch.value,"afternoon")
})

const clickDate = (curentDate) => {
  date.value = curentDate;
};
//获取对应科室排班
const getDocSchList = async ()=>{
  let result = await getDocSchListAPI(route.query?.TwoDepart)
  dateSchList.value=result.data
}
//挂号按钮的回调
const goRegisterSetp = (id)=>{
  router.push({
    path:'/user/RegistrationSetup',
    query:{
      id:id
    }
  })
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  .title {
    color: #7f7f7f;
    height: 20px;
  }
  .content {
    flex: 4;
    display: flex;
    flex-direction: column;
    .time {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 900;
      color: #7f7f7f;
    }
    .itemList {
      flex: 7;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .item {
        flex: 1;
        height: 120px;
        //淡蓝色边框
        border: 2px solid skyblue;
        border-radius: 4px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s;

        .title {
          flex: 3;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          //淡蓝色背景
          background-color: #a0cfff;
        }
        .status {
          flex: 7;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          //淡蓝色字体
          color: #7f7f7f;
          //字体加粗
          font-weight: 900;
          //字体大小
          font-size: 20px;
          //字体居中
          text-align: center;
          //字体加粗
          font-weight: 900;
        }
      }
    }
    .cur {
      transform: scale(1.1);
      border: 2px solid #4a90e2;
      box-shadow: 0 0 10px #4a90e2;
    }
  }
  .fullter {
    flex: 6;
    display: flex;
    flex-direction: column;
    .befor {
      flex: 1;
      .title {
        display: flex;
        align-items: center;
        h3 {
          margin-left: 10px;
          font-size: 18px;
          font-weight: 900;
        }
      }
      .body {
        .item {
          display: flex;
           margin: 10px 0px;
        justify-content: space-between;
       padding-bottom: 5px;
        //底部边框
        border-bottom: 1px solid #7f7f7f;
        .left {
          .doctor {
            font-size: 20px;
            font-weight: 900;
            color: skyblue;
            margin: 10px 0px;
          }
          .depart {
            color: #7f7f7f;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .money {
            font-size: 16px;
            margin-right: 10px;
            color: #7f7f7f;
            font-weight: 900;
          }
        }
        }
      }
    }
    .after {
      flex: 1;
      .title {
        display: flex;
        align-items: center;
        h3 {
          margin-left: 10px;
          font-size: 18px;
          font-weight: 900;
        }
      }
      .body {
        .item {
          display: flex;
        justify-content: space-between;
       
       padding-bottom: 5px;
        //底部边框
        border-bottom: 1px solid #7f7f7f;
        .left {
          .doctor {
            font-size: 20px;
            font-weight: 900;
            color: skyblue;
            margin: 10px 0px;
          }
          .depart {
            color: #7f7f7f;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .money {
            font-size: 16px;
            margin-right: 10px;
            color: #7f7f7f;
            font-weight: 900;
          }
        }
        }
      }
     
    }
  }
}
</style>
